import React, { lazy, Suspense } from "react";
import CatEyeLayout from "../layout/CatEyeLayout";
import { Redirect } from "react-router-dom";

//一级路由组件
const Explore = lazy(() => import("../pages/Explore/Explore"));
const Movie = lazy(() => import("../pages/Movie/Movie"));
const Show = lazy(() => import("../pages/Show/Show"));
const My = lazy(() => import("../pages/My/My"));

//二级路由组件
const MovieDetail = lazy(() =>
  import("../pages/Detail/MovieDetail/index")
);
const RecommendDetail = lazy(() =>
  import("../pages/Detail/RecommendDetail/index")
);
const Map = lazy(() => import("../pages/Detail/Map/index"));
const Login = lazy(() => import("../pages/Sign/Login/index"));
const Register = lazy(() => import("../pages/Sign/Register/index"));

//悬停组件
const SuspenseComponent = (Component) => (props) => {
  return (
    <Suspense fallback={null}>
      <Component {...props}></Component>
    </Suspense>
  );
};

export default [
  {
    path: "/",
    component: CatEyeLayout,
    routes: [
      {
        path: "/",
        exact: true,
        render: () => <Redirect to={"/movie"} />,
      },
      {
        path: "/explore",
        component: SuspenseComponent(Explore),
        routes: [
          {
            path: "/explore/map",
            component: SuspenseComponent(Map),
          },
        ],
      },
      {
        path: "/movie",
        component: SuspenseComponent(Movie),
        routes: [
          {
            path: "/movie/movieDetail/:id",
            component: SuspenseComponent(MovieDetail),
          },
        ],
      },
      {
        path: "/show",
        component: SuspenseComponent(Show),
        // routes:[
        //     {
        //         path: '/show/recommend/:id',
        //         component: SuspenseComponent(RecommendDetail)
        //     }
        // ]
      },
      {
        path: "/my",
        component: SuspenseComponent(My),
        // routes:[
        //     {
        //         path:'/my/login',
        //         component: SuspenseComponent(Login)
        //     },
        //     {
        //         path:'/my/register',
        //         component: SuspenseComponent(Register)
        //     }
        // ]
      },
    ],
  },
];
